<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>图表统计</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/iconfont.css" />
    <link rel="stylesheet" href="css/main.css" />
    <script src="./libs/jquery/jquery.min.js"></script>
    <script src="./js/jqconfig.js"></script>
    <script type="text/javascript" src="./libs/echarts.js"></script>
  </head>

  <body>
    <div class="container-fluid">
      <div class="row spannel_list">
        <div class="col-sm-3 col-xs-6">
          <div class="spannel">
            <em id="totalArticle"></em><span>篇</span>
            <b>总文章数</b>
          </div>
        </div>
        <div class="col-sm-3 col-xs-6">
          <div class="spannel scolor01">
            <em id="dayArticle"></em><span>篇</span>
            <b>日新增文章数</b>
          </div>
        </div>
        <div class="col-sm-3 col-xs-6">
          <div class="spannel scolor02">
            <em id="totalComment"></em><span>条</span>
            <b>评论总数</b>
          </div>
        </div>
        <div class="col-sm-3 col-xs-6">
          <div class="spannel scolor03">
            <em id="dayComment"></em><span>条</span>
            <b>日新增评论数</b>
          </div>
        </div>
      </div>
    </div>

    <div class="container-fluid">
      <div class="row curve-pie">
        <div class="col-lg-8 col-md-8">
          <div class="gragh_pannel" id="curve_show"></div>
        </div>
        <div class="col-lg-4 col-md-4">
          <div class="gragh_pannel" id="pie_show"></div>
        </div>
      </div>
    </div>

    <div class="container-fluid">
      <div class="column_pannel" id="column_show"></div>
    </div>

    <script>
      $(function () {
        info();
        line_data();
        pie_data();
        column_data();
      });
      // 统计
      function info() {
        $.ajax({
          type: "get",
          url: "/admin/data/info",
          data: {},
          success: (res) => {
            console.log(res);
            let { totalArticle, dayArticle, totalComment, dayComment } = res;
            $("#totalArticle").text(totalArticle);
            $("#dayArticle").text(dayArticle);
            $("#totalComment").text(totalComment);
            $("#dayComment").text(dayComment);
          },
        });
      }

      //请求折线图数据
      function line_data() {
        $.ajax({
          type: "get",
          url: "/admin/data/article",

          success: (res) => {
            console.log(res);
            let { date } = res;

            // 调用折线图
            line(date);
          },
        });
      }

      //折线图
      function line(date) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById("curve_show"));

        // 指定图表的配置项和数据
        let option = {
          xAxis: {
            type: "category",
            boundaryGap: false,
            // data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            data: date.map((item) => item.date),
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              // data: [820, 932, 901, 934, 1290, 1330, 1320],
              data: date.map((item) => item.count),
              type: "line",
              smooth: true, //丝滑
              label: {
                show: true,
                position: "top",
              }, //显示数据
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "red",
                  },
                  {
                    offset: 1,
                    color: "#fff",
                  },
                ]),
              },
            },
          ],
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      }

      //pie 饼图
      function pie(date) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById("pie_show"));

        // 指定图表的配置项和数据
        var option = {
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b}: {c} ({d}%)",
          },
          legend: {
            // data: [
            //   "直达",
            //   "营销广告",
            //   "搜索引擎",
            //   "邮件营销",
            //   "联盟广告",
            //   "视频广告",
            //   "百度",
            //   "谷歌",
            //   "必应",
            //   "其他",
            // ],
            data: date.map((item) => item.name),
          },
          series: [
            {
              name: "访问来源",
              type: "pie",
              radius: ["45%", "60%"],
              labelLine: {
                length: 30,
              },

              // data: [
              //   { value: 1048, name: "百度" },
              //   { value: 335, name: "直达" },
              //   { value: 310, name: "邮件营销" },
              //   { value: 251, name: "谷歌" },
              //   { value: 234, name: "联盟广告" },
              //   { value: 147, name: "必应" },
              //   { value: 135, name: "视频广告" },
              //   { value: 102, name: "其他" },
              // ],
              data: date.map((item) => ({
                value: item.articles,
                name: item.name,
              })),
            },
          ],
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      }
      // 饼图数据
      function pie_data() {
        $.ajax({
          type: "get",
          url: "/admin/data/category",
          data: {},
          success: (res) => {
            console.log(res);
            let date = res.date;
            pie(date);
          },
        });
      }

      //柱状图数据
      function column(arr, arr1) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById("column_show"));

        // 指定图表的配置项和数据
        var option = {
          xAxis: {
            type: "category",
            // data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            data: arr,
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              // data: [120, 200, 150, 80, 70, 110, 130],
              data: arr1,
              barWidth: "30%",
              type: "bar",
            },
          ],
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      }

      function column_data() {
        $.ajax({
          type: "get",
          url: "/admin/data/visit",
          data: {},
          success: (res) => {
            console.log(res);
            let data = res.data;
            let arr = [];
            let arr1 = [];
            for (let k in data) {
              // console.log(data[k]);
              // console.log(k);
              arr.push(k);
              arr1.push(data[k]);
            }
            column(arr, arr1);
          },
        });
      }
    </script>
  </body>
</html>
